import { Box, Typography } from '@mui/material';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';

import Routes from '../../constants/routes';
import { useLoadDisbursements } from '../../hooks/disbursement-load-more';
import DisbursementTable from '../shared/tables/disbursement-table';

export const RecentDisbursement = () => {
    const router = useRouter();
    const [pageLoading, setPageLoading] = useState(true);

    const { loading, items, error, loadMore } = useLoadDisbursements();

    useEffect(() => {
        const load = async () => {
            await loadMore();
            setPageLoading(false);
        };

        load().then();
    }, []);

    return (
        <Box sx={{ pt: 7 }}>
            <Box className="d-flex justify-content-between">
                <Typography variant="h4" sx={{ color: '#BCB6E9', pb: 2 }}>
                    Recent Disbursements
                </Typography>
                <Typography
                    variant="h4"
                    sx={{ color: '#BCB6E9', pb: 2, cursor: 'pointer' }}
                    onClick={() => router.push(Routes.DISBURSEMENTS)}
                >
                    View All
                </Typography>
            </Box>
            <Box
                sx={{
                    mb: 5,
                    background: '#0B0821',
                    borderRadius: 11,
                    p: 2
                }}
            >
                <DisbursementTable
                    pageLoading={pageLoading}
                    items={items}
                    error={error}
                    loading={loading}
                />
            </Box>
        </Box>
    );
};
